<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import UpdateAvatar from '@/components/updateAvatar/index.vue'
definePageMeta({
  layout: 'default-home',
  title: '我的',
  i18n: 'menu.profile',
})
const { t } = useI18n();
const router = useRouter()
const userStore = useUserStore()
// 初始进度0%
const realProgress = ref(0)
// 目标进度80%
const targetProgress = ref(0)
/** 进度平滑递增动画 */
function animateProgress() {
  let timer = setInterval(() => {
    if (realProgress.value >= targetProgress.value) {
      clearInterval(timer)
      realProgress.value = targetProgress.value
    } else {
      realProgress.value += 1
    }
  }, 10)
}
onMounted(async () => {
  // 获取用户信息
  await userStore.getUserInfo()
  console.log('我的--用户信息', userStore.user);
  // 根据后端返回值决定初始化进度%
  targetProgress.value = 80
  animateProgress()
})
const open = ref(false)
const submitHandler = (v: string) => {
  // userStore.updateAvatar(v)
  open.value = false
}
const goEdit = () => {
  router.push({
    path: '/my/setting'
  })
}
const toGogout = () => {
  localStorage.clear()
  window.location.reload()
}
</script>

<template>
  <div mx-auto text-16 class="">
    <div class="top-bg">
      <div class="w-full flex justify-between items-center color-#ffffff px-15 pt-15 mb-35">
        <div class="flex  items-center font-bold ">
          <div class="avatar-bg">
            <img class="w-58 h-58 rounded-full" :src="'/imgs/head'+userStore.user.avatar+'.png'" alt="" @click="open = true">
          </div>
          <div>
            <div>{{ userStore.user.nickname }}</div>
            <div class="text-12 opacity-70">ID:{{ userStore.user.uid }}</div>
          </div>
          <div class="ml-10 relative w-69 pb-20">
            <img src="/imgs/v2_bg.png" alt="" class="w-69">
            <span class="absolute top-3 left-32 text-14">VIP2</span>
          </div>
        </div>
        <div class="text-14" @click="goEdit()">
          编辑<van-icon name="arrow" color="#f8f8f9" />
        </div>
      </div>
      <!-- 钱包余额 -->
      <div class="gold-box bg-#ffffff my-10 px-15 py-12 ">
        <div class="">
          <div class="flex justify-between items-center ">
            <div class="text-15 my-5 color-#a0b5ba">{{ t("my_page.walletBalance") }}</div>
            <div class="gold">999999</div>
          </div>
          <div class="w-100% h-1 bg-#474c4c mb-13"></div>
          <!-- <div class="flex  items-center flex-col">
          <van-button w-80 size="small" to="/recharge" class="bg-#f6f7ff mb-10"> {{ t("my_page.recharge") }}</van-button>
          <van-button w-80 size="small" to="/recharge/withDraw" class="mt-20">{{ t("my_page.withDraw") }}</van-button>
        </div> -->
          <div class="flex items-center justify-between mb-18">
            <div class="btn bg-#077cfe">
              <img src="/imgs/recharge.png" alt="" class="w-22 mr-10 filter-white">
              <span class="mt-2">{{ t("my_page.recharge") }}</span>
            </div>
            <div class="btn btn2">
              <img src="/imgs/btn_withdrawal.png" alt="" class="w-17 mr-10">
              <span class="mt-2">{{ t("my_page.withDraw") }}</span>
            </div>
          </div>
        </div>
        <div class="flex justify-between items-center">
          <div class="flex items-center flex-col">
            <img src="/imgs/recharge.png" alt="" class="w-23 mb-5" />
            <div class="color-#ffffff opacity-70 text-13">充值记录</div>
          </div>
          <div class="flex items-center flex-col">
            <img src="/imgs/withdrawal.png" alt="" class="w-23 mb-5" />
            <div class="color-#ffffff opacity-70 text-13">提现记录</div>
          </div>
          <div class="flex items-center flex-col">
            <img src="/imgs/game.png" alt="" class="w-23 mb-5" />
            <div class="color-#ffffff opacity-70 text-13">游戏记录</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 列表 -->
    <div class="list">
      <van-cell :title="t('my_page.vipCenter')" is-link to="/my/vip">
        <template #icon>
          <img src="/imgs/icon_vip.png" alt="" class="w-20  mr-13" />
        </template>
      </van-cell>
      <!-- <van-cell :title="t('my_page.gameList.title')" is-link to="/my/gameList">
        <template #icon>
          <img src="/imgs/game.png" alt="" class="w-20 h-13 mr-13" />
        </template>
      </van-cell> -->
      <!-- <van-cell :title="t('my_page.rechargeList')" is-link to="/recharge/list">
        <template #icon>
          <img src="/imgs/recharge.png" alt="" class="w-20 h-13 mr-13" />
        </template>
      </van-cell> -->
      <!-- <van-cell :title="t('my_page.withDrawList')" is-link to="/recharge/withDrawList">
        <template #icon>
          <img src="/imgs/withdrawal.png" alt="" class="w-20 h-13 mr-13" />
        </template>
      </van-cell> -->
      <van-cell :title="t('my_page.email.title')" is-link to="/my/email">
        <template #icon>
          <img src="/imgs/icon_email.png" alt="" class="w-20 mr-13" />
        </template>
      </van-cell>
      <van-cell :title="t('my_page.help.title')" is-link to="/">
        <template #icon>
          <img src="/imgs/icon_help.png" alt="" class="w-20 mr-13" />
        </template>
      </van-cell>
      <!-- <van-cell :title="t('my_page.secureCenter')" is-link to="/">
        <template #icon>
          <img src="/img/web_icon_game.png" alt="" class="w-20 h-13 mr-13" />
        </template>
      </van-cell> -->
      <!-- <van-cell :title="t('my_page.advise.title')" is-link to="/my/advise">
        <template #icon>
          <img src="/img/app_icon_jy.png" alt="" class="w-20 h-15 mr-13" />
        </template>
      </van-cell> -->
      <van-cell :title="t('my_page.setting.setting')" is-link to="/my/setting">
        <template #icon>
          <img src="/imgs/icon_set.png" alt="" class="w-20  mr-13" />
        </template>
      </van-cell>
      <van-cell :title="t('my_page.downAPK')" is-link to="/">
        <template #icon>
          <img src="/imgs/icon_download_apk.png" alt="" class="w-20 h-15 mr-13" />
        </template>
      </van-cell>
      <!-- <van-cell :title="t('my_page.addMain')" is-link to="">
        <template #icon>
          <img src="/img/app_icon_add.png" alt="" class="w-20 h-15 mr-13" />
        </template>
      </van-cell> -->
    </div>
    <!-- 社区 -->
    <div class="px-15 my-20">
      <div class="join">
        <div class="line"></div>
        <div class="color-#6c7878">加入我们的社区</div>
        <div class="line"></div>
      </div>
      <div class="contact">
        <img src="/imgs/icon_facebook.png" alt="">
        <img src="/imgs/icon_x.png" alt="">
        <img src="/imgs/icon_camera.png" alt="">
        <img src="/imgs/icon_youtube.png" alt="">
      </div>
    </div>
    <!-- 退出登录 -->
    <div class="flex justify-center items-center logout mx-auto" @click="toGogout">
      <!-- <div> -->
      <img src="/imgs/log_out.png" alt="" class="w-18 mr-16">
      <div class="color-#ffffff opacity-70">退出登录</div>
      <!-- </div> -->
    </div>
    <UpdateAvatar v-model:visible="open" @updateAvatar="submitHandler" />
    <AppFooter />
  </div>
</template>
<style lang="css" scoped>
.join {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.contact {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
  margin: 20px;

}

.contact img {
  width: 50px;
}

.line {
  width: 30%;
  height: 1px;
  background-color: #323838;
}

.btn {
  width: 151px;
  height: 36px;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn2{
  background-color: #4e585a;
}
.filter-white {
  filter: brightness(0) invert(1);
  /* 
    brightness(0) - 将图像转为全黑 
    invert(1) - 反转颜色(黑变白)
  */
}

.top-bg {
  background: url('/imgs/bg_my.png') no-repeat;
  background-size: cover;
}

.logout {
  margin-top: 30px;
  margin-bottom: 20px;
  width: 223px;
  height: 40px;
  background-color: #29282e;
  border-radius: 6px;
}

.avatar-bg {
  border: 2px solid #414ebd;
  box-shadow: 2px 0px 10px rgba(65, 77, 188, 0.5);
  padding: 2px;
  border-radius: 50%;
  margin-right: 10px;
}

.gold-box {
  margin: 0 15px 20px;
  background-color: #323838;
  border-radius: 5px;
}

.gold {
  font-family: Roboto-Medium;
  font-size: 18px;
  color: #ffffff;
}

.list {
  margin: 0 15px;
  background-color: #323838;
  border-radius: 12px;
  /* border: solid 1px rgba(255, 255, 255, 0.22); */

}

.start {
  background: url('/img/vip-bg.png');
  background-size: 100% 100%;
}

.fulititle {
  background: url('/img/fulititle_bg.png');
  background-size: 100% 100%;
}

.vip {
  background: url('/img/vip-bg.png') no-repeat center;
  background-size: cover;
  color: #ffffff;
  /* width: 48px; */
  /* height: 20px; */
  font-size: 12px;
  border-radius: 20px;
  padding: 0 10px;
}

/* 进度条 */
.vip-progress-bar {
  width: 100%;
  height: 10px;
  background: #f7efde;
  /* background: url('/img/vip_pro_bg.png'); */
  border-radius: 16px;
  overflow: hidden;
}

.vip-progress-inner {
  height: 100%;
  /* background: linear-gradient(to right, #21c7fa, #1989fa); */
  background: url('/img/vip_pro.png') no-repeat center;
  background-size: cover;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  transition: width 1s ease;
}

::v-deep .van-cell:after {
  border-bottom: 2px solid #474c4c;
}

::v-deep .van-cell__right-icon {
  color: #ffffff;
  opacity: 0.7;
}

::v-deep .van-cell__title,
.van-cell__value {
  color: #ffffff;
}
::v-deep .van-cell {
  background: transparent;
  color: #ffffff;
  align-items: center;
  padding: 13PX;
}

::v-deep .van-button--default {
  background: #f5f7ff;
  border: 1px solid #eaf0f6;
  color: var(--c-text);
}

::v-deep .van-grid-item__icon {
  font-size: 30px;
}

::v-deep .van-grid-item:first-child .van-grid-item__content--center {
  border-bottom-left-radius: 10px;
}

::v-deep .van-grid-item:last-child .van-grid-item__content--center {
  border-bottom-right-radius: 10px;
}

::v-deep .van-cell--clickable:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

::v-deep .van-cell--clickable:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
</style>
